<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>网页定位导航效果扩展案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-size: 12px;
        line-height: 1.7;
        background-color: #888;
      }
      li {
        list-style: none;
      }
      #content {
        width: 1000px;
        margin: 0 auto;
        padding-top: 100px;
        padding-bottom: 300px;
      }
      #content .item{
        width: 100%;
        height: 540px;
        position: relative;
        left:200px;   
      }
      #content .item img {
        position: absolute;
        top: 100px;
        left: 40px;
      }
      #content #item1 {
        background: url("http://img.mukewang.com/536c9ea800013ae610000540.jpg") no-repeat center top;
      }
      #content #item1 img{
        position: absolute;
        left: 500px;
        width: 474px;
      }
      #content #item2 {
        background: url("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat center top;
      }
      #content #item3 {
        background: url("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat center top;
      }
      #content #item4 {
        background: url("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat center top;
      }
      #content #item5 {
        background: url("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat center top;
      }
      #menu{
        position:fixed;  
      }
      #menu h1 {
        color: #fff;
        font-size: 14px;
        text-align: center;
        background: #ee1111;
        line-height: 30px;
      }
      #menu ul li a {
        display: block;
        margin: 5px 0;
        font-size: 12px;
        color: #ccc;
        width: 160px;
        padding: 10px 20px;
        text-decoration: none;
        text-align: left;
        border-bottom: 1px dashed #999;
      }
      #menu ul li a strong {
        color: #f1f1f1;
      }
      #menu ul li a:hover,
      #menu ul li a.current {
        color: #fff;
        background: #666;
      }
        /*ie6 hack*/
      * html, * html body {
        background-image: url(about:blank);
        background-attachment: fixed;
      }

      * html #menu {
        /*position: fixed;*/
        position: absolute;
        top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
      }
    </style>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
    <script>
      $(document).ready(function () {
        $(window).scroll(function () {
          var top = $(document).scrollTop();
          var menu = $("#menu");
          var items = $("#content").find(".item");

          var currentId="";
          items.each(function(){
            var m=$(this);
            var itemtop=m.offset().top;
            if(top>itemtop-200){
              currentId="#"+m.attr("id");
            }else{
              return false;
            }  
          })

          var currentLink=menu.find(".current");
          if(currentId&&currentLink.attr("href")!=currentId){            
            currentLink.removeClass("current");
            menu.find("[href="+currentId+"]").addClass("current");
          }
        });

      });
    </script>
  </head>
  <body>
    <div id="menu">
      <h1>正在首发</h1>
      <ul>
        <li><a href="#item1" class="current"><strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>
        <li><a href="#item2"><strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>
        <li><a href="#item3"><strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>
        <li><a href="#item4"><strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>
        <li><a href="#item5"><strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>
      </ul>
    </div>
    <div id="content">

      <div id="item1" class="item">
        <img src="http://img.mukewang.com/536ca02800014e7105000400.jpg">
      </div>
      <div id="item2" class="item">
        <img src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">
      </div>
      <div id="item3" class="item">
        <img src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">
      </div>
      <div id="item4" class="item">
        <img src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">
      </div>
      <div id="item5" class="item">
        <img src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">
      </div>
    </div>
  </body>
</html>
